<template>
  <el-card class="box-card" shadow="never">
    <div class="excel_box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
      <el-button size="small" type="primary" @click="exportExcel" style="margin-top: 10px;">导出EXCEL</el-button>
      <!-- <el-button size="small" type="primary" @click="uploadExcel" style="margin-left: 10px;">导入EXCEL</el-button> -->
      <!-- <el-upload class="upload-demo" action="" accept=".xls, .xlsx" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList">
        <el-button size="small" type="primary" @click="uploadExcel">导入EXCEL</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload> -->
    </div>
  </el-card>
</template>

<script>
import excel from '@/lib/excel'

export default {
  name: "excel",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }],
      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
    }
  },
  methods: {
    exportExcel () {
      if (this.tableData.length) {
        const params = {
          title: ['日期', '姓名', '地址'],
          key: ['date', 'name', 'address'],
          data: this.tableData,
          autoWidth: true,
          filename: '表格数据'
        }
        excel.export_array_to_excel(params)
      } else {
        console.log('表格数据不能为空！')
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    }
  }
}
</script>

<style lang="less" scoped>

</style>
